<template lang="">
  <div class="page">
    <div class="top">
      <div class="mask">
      </div>
      <van-icon name="arrow-left" class="jiantou" @click="clickGo" />
      <img :src="'https://elm.cangdu.org/img/'+(shops.image_path)" alt="" class="imgwlp">
      <div class="top_1">
        <div class="img">
          <img :src=" 'https://elm.cangdu.org/img/'+(shops.image_path)" alt="" class="wlp">
        </div>
        <div class="center">
          <div>{{shops.name}}</div>
          <div>商家配送/分钟送达/配送费￥{{shops.float_delivery_fee}}</div>
          <div>公告：{{shops.promotion_info}}</div>
        </div>
      </div>
      <div v-for="(item,index) in activitie" :key="index">
        <div v-if="item.icon_name" class="content_1">
          <div class="content_11">
            <span>{{item.icon_name}}</span>
            <span>{{item.description}} (APP专享)</span>
          </div>
          <div class="content_12" v-if="activitie.length ==1">一个活动</div>
          <div class="content_12" v-else-if="activitie.length == 2">二个活动</div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
  export default {
    name: "ShowShops",
    props: ['shops', 'activitie'],
    methods: {
      clickGo() {
        this.$router.go(-1);
      }
    },
  }
</script>

<style lang="less" scoped>
  .page {
    overflow: hidden;
    height: 128px;
    border: 1px white solid;
  }

  .jiantou {
    position: absolute;
    font-size: 25px;
    top: 5px;
    z-index: 1000;
  }

  .top {
    color: white;
    height: 128px;
    overflow: hidden;
  }

  .app1 {
    z-index: 1000;
  }

  .page .imgwlp {
    width: 100%;
    height: 128px;
    position: absolute;
    left: 0;
    top: 0;
    filter: blur(5px);
    z-index: 0;
  }

  .top_1 {
    overflow: hidden;
    opacity: 0.9;
    margin: 10px;
  }

  .img {
    width: 80px;
    height: 80px;
    border: 1px solid;
    float: left;
  }

  .wlp {
    width: 80px;
    height: 80px;
  }

  .top_1 .center {
    float: left;
    margin-left: 10px;
  }

  .center div:nth-of-type(1) {
    font-size: 18px;
    font-weight: 700;
  }

  .center div:nth-of-type(2) {
    font-size: 10px;
    margin-top: 10px;
  }

  .center div:nth-of-type(3) {
    font-size: 10px;
    margin-top: 10px;
  }

  .content_1 {
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 0 10px;
    margin-bottom: 5px;
  }

  .content_11 {
    font-size: 12px;
    z-index: 1000;
  }

  /* 
  .mask {
    width: 100%;
    height: 128px;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  } */

  .nomask {
    z-index: 1000;
  }

  .content_11 span:nth-of-type(1) {
    background-color: #f07373;
    padding: 1.5px;
    margin-right: 3px;
    margin-bottom: 12px;
  }

  .content_12 {
    font-size: 12px;
    margin-bottom: 12px;

  }
</style>